<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改项目信息')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-projects-edit" th:object="${projects}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">项目名称：</label>
            <div class="col-sm-10">
                <input name="projectName" th:field="*{projectName}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">项目描述：</label>
            <div class="col-sm-10">
                <input type="hidden" class="form-control" th:field="*{content}">
                <div class="summernote" id="content"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">项目附件：</label>
            <div class="col-sm-10">
                <ul style="margin: 5px 0 15px -20px" id="file-ul">
                    <li style="margin-bottom: 5px" th:each="file: ${projects.fileList}" th:id="|file_${file.id}|">
                        [[${file.fileName}]]
                        <a class="btn btn-info btn-xs" th:onclick="prevFile([[${file.url}]])"><i class="fa fa-search"></i>预览</a>
                        <a class="btn btn-warning btn-info btn-xs" th:href="${file.url}"><i class="fa fa-cloud-download"></i>下载</a>
                        <a class="btn btn-danger btn-xs" href="javascript:void(0)" th:onclick="deleteFile([[${file.id}]])"><i class="fa fa-remove"></i>删除</a>
                    </li>
                </ul>
                <div class="file-loading">
                    <input id="multipleFile" name="files" type="file" multiple>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">立项时间：</label>
            <div class="col-sm-10">
                <div class="input-group date">
                    <input name="approvalTime" th:value="${#dates.format(projects.approvalTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">计划时间：</label>
            <div class="col-sm-5">
                <div class="input-group date">
                    <input name="plannedStartTime" th:value="${#dates.format(projects.plannedStartTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="input-group date">
                    <input name="plannedEndTime" th:value="${#dates.format(projects.plannedEndTime, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">项目成员：</label>
            <div class="col-sm-10">
                <select name="teamMembers" id="teamMembers-select" class="user-select form-control select2-multiple" multiple required></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">项目负责人：</label>
            <div class="col-sm-10">
                <select name="ownerId" id="ownerId-select" class="user-select form-control" required></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">项目状态：</label>
            <div class="col-sm-10">
                <select th:field="*{status}" class="form-control" name="status" th:with="type=${@dict.getType('project_status')}">
                    <option value="">所有</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">部门：</label>
            <div class="col-sm-10">
                <input name="department" th:field="*{department}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">项目进度：</label>
            <div class="col-sm-10">
                <input name="progressRate" th:field="*{progressRate}" class="form-control" type="text">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-css" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<script th:inline="javascript">
    var prefix = ctx + "projects/projects";
    $("#form-projects-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-projects-edit').serialize());
        }
    }

    $("input[name='approvalTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='plannedStartTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='plannedEndTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $(function() {
        $(".user-select").select2({
            placeholder: '--选择用户--',
            ajax: {
                url: '/system/user/selectList',
                delay: 250,
                cache: true,
                data: function (params) {
                    return {
                        userName: params.term
                    };
                }
            }
        });
        var owner = [[${projects.owner}]];
        $('#ownerId-select').append(new Option(owner.userName, owner.userId, false, true));
        $('#ownerId-select').trigger("change");

        var userList = [[${projects.userList}]]
        $.each(userList, function (index, value) {
            $('#teamMembers-select').append(new Option(value.userName, value.userId, false, true));
        });
        $('#teamMembers-select').trigger("change");

        $('.summernote').each(function(i) {
            $('#' + this.id).summernote({
                lang: 'zh-CN',
                height: 100,
                dialogsInBody: true,
                callbacks: {
                    onChange: function(contents, $edittable) {
                        $("input[name='" + this.id + "']").val(contents);
                    },
                    onImageUpload: function(files) {
                        var obj = this;
                        var data = new FormData();
                        data.append("file", files[0]);
                        $.ajax({
                            type: "post",
                            url: ctx + "common/upload",
                            data: data,
                            cache: false,
                            contentType: false,
                            processData: false,
                            dataType: 'json',
                            success: function(result) {
                                if (result.code == web_status.SUCCESS) {
                                    $('#' + obj.id).summernote('insertImage', result.url);
                                } else {
                                    $.modal.alertError(result.msg);
                                }
                            },
                            error: function(error) {
                                $.modal.alertWarning("图片上传失败。");
                            }
                        });
                    }
                }
            });
            var content = $("input[name='" + this.id + "']").val();
            $('#' + this.id).summernote('code', content);
        })

        let projectId = $('#id').val();
        // 多图上传
        $("#multipleFile").fileinput({
            uploadUrl: ctx + 'common/uploads',
            uploadAsync: false,
            showPreview : false, //是否显示预览
            showCaption: true,//是否显示标题
            allowedFileTypes: ['pdf'],
            allowedFileExtensions: ['pdf'],
            uploadExtraData: {
                bizId: projectId,
                bizType: "project"
            }
        }).on('filebatchuploadsuccess', function (event, data, previewId, index) {
            var rsp = data.response;
            if (rsp.code != "0") {
                $.modal.alertWarning("上传失败", rsp.msg);
            } else {
                var list = rsp.uploadList;
                var ul = $("#file-ul")
                for(i in list) {
                    var file = list[i];
                    ul.append(
                        "<li style=\"margin-bottom: 5px\" id=\"file_"+ file.id +"\">" +
                        file.fileName +
                        "<a class=\"btn btn-info btn-xs\" th:onclick=\"prevFile('"+ file.url +"')\"><i class=\"fa fa-search\"></i>预览</a>" +
                        "<a class=\"btn btn-warning btn-xs\" href=\""+ file.url +"\"><i class=\"fa fa-cloud-download\"></i>下载</a>\n" +
                        "<a class=\"btn btn-danger btn-xs\" href=\"javascript:void(0)\" onclick=\"deleteFile(" + file.id + ")\"><i class=\"fa fa-remove\"></i>删除</a>\n" +
                        "</li>"
                    )
                }
            }
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })
    });

    function prevFile(url) {
        $.modal.open("PDF预览", ctx + "common/pdfPreview?url="+url, 1200, 800);
    }

    function deleteFile(id) {
        $.modal.confirm("确认要删除该附件吗？", function() {
            $.operate.post(ctx + "common/delFile", { "id": id }, function () {
                $("#file_" + id).remove();
            });
        })
    }
</script>
</body>
</html>